<script setup>
import { getProList, addItem, editItem, delItem } from '@/api/home.js'
import { ref } from 'vue'
const proList = ref([])

getProList({ page: 0 }).then(res => {
  // console.log(res);
  proList.value = res
})

// 下一页的点击事件
let page = ref(0)
function nextClick () {
  page.value++

  getProList({ page: page.value }).then(res => {
    console.log(res);
    if (res.length != 0) {
      proList.value = [...proList.value, ...res]
    } else {
      alert('没有更多数据了')
    }

  })
}

// 增加按钮的点击事件
function addClick () {
  addItem({
    createTime: "1990-11-23 02:43:29",
    goodsKind: "女装",
    proStart: "★★",
    proid: "pro-e9c07b1c-2023-1FAd-BBa8-ecEBbb1AdF2A",
    proimage: "http://dummyimage.com/150x150/f279eb&text=老吴",
    proname: "我演过最完美戏，就是上课时装听懂的样子。"
  }).then(res => {
    console.log(res);
  })
}

// 修改数据的点击事件
function editClick (item) {
  item.proname = '你要干嘛'
  editItem(item).then(res => {
    // console.log(res);
    alert(res.msg)
  })
}

// 删除一条数据
function delClick (item) {
  delItem(item).then(res => {
    console.log(res);
    getProList({ page: 0 }).then(res => {
      // console.log(res);
      proList.value = res
    })
  })
}
</script>
<template>
  <div>
    <h1>mockjs使用</h1>

    <button @click="addClick"> 添加数据 </button>
    <button @click="nextClick">下一页</button>
    <ol>
      <li v-for="item in proList" :key="item.proid">
        {{ item.proname }}
        <button @click="editClick(item)">修改</button>
        <button @click="delClick(item)">删除</button>
      </li>
    </ol>

  </div>
</template>

<style scoped></style>
